<template>
  <view class="content">
   <!-- navbar部分 -->
   		<u-navbar
			@leftClick="backHome"
   		:autoBack="false"
   		:bgColor="'rgba(15, 23, 79,1)'"
   		:leftIconColor="'rgba(255,255,255,1)'"
   		leftText="设备状态"
			style="margin-bottom: 124rpx;"
   		>
   		</u-navbar>
		<!-- 内容区 -->
		<!-- 第一组 -->
		<view class="robotBox"  v-for="(item,index) in myArry" :key="index">
			<!-- 机器人状态 -->
			<view class="robotStatus">
				<text style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 500;color: #333333;">{{item.robot_name}}</text>
				<text style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #666666;margin-left: 16rpx;">{{item.robot_num}}</text>
				<view v-if="item.robot_type == 0" style="width: 101rpx;height: 42rpx;background: #F6F7F8;
				border-radius: 8rpx;font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;
				color: #333333;display: flex;justify-content: center;align-items: center;margin-left: 16rpx;">普通</view>
					<view   v-if="item.robot_type == 1" style="width: 101rpx;height: 42rpx;background: #FFEDED;border-radius: 8rpx;font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #E74646;display: flex;justify-content: center;align-items: center;margin-left: 16rpx;">救援</view>
				
				<image  v-if="item.robot_state == 1" src="/static/images/home/zx.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 280rpx;"></image>
				<image  v-if="item.robot_state == 0" src="/static/images/home/lx.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 280rpx;"></image>
			</view>
			
			<!-- plc状态 -->
			<view class="plcStatus">
				<view class="plcBox" v-for="(items,key) in item.plcapplist" :key="items.plcid">
					<image src="../../../static/images/home/plcg.png" mode="" style="width: 19rpx;height: 29rpx;"></image>
					<text class="plcBoxText" :title="items.plc_name">{{items.plc_name}}</text>
					<image v-show="items.plc_state == 0" src="../../../static/images/home/lx1.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
					<image v-show="items.plc_state == 1" src="../../../static/images/home/zx1.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import cookie from '../../../cookie.js'
	
  export default {
    data() {
      return {
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//返回的大数组rows,机器人信息
				myArry:[],
      }
    },
		onLoad() {
			this.robotList()
			this.initPullDownRefresh(); // 初始化下拉刷新
		},
		methods:{
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.alarmtime = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
					// 下拉刷新时重新加载数据
					this.robotList()
			
			    // 在1秒后停止下拉刷新
			    setTimeout(() => {
			      uni.stopPullDownRefresh();
			    }, 500);
			},
			backHome(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					this.myArry = Response.rows
					console.log('99999999999999999999',Response.rows)
				})
			}
		}
  }
</script>

<style scoped>
  *{
  	margin: 0;
  	padding: 0;
  }
  page{
  	 background: #F5F5F5;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
	.robotBox{
		width: 710rpx;
		height: 267rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(22,33,135,0.03);
		border-radius: 12rpx;
		margin-top: 50rpx;
		z-index: 99;
	}
	.robotStatus{
		width: 100%;
		height: 54rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		padding-left: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		/* background-color: aquamarine; */
	}
	.plcStatus{
		width: 100%;
		height: 167rpx;
		padding-left: 22rpx;
		padding-right: 21rpx;
		display: flex;
		/* justify-content:space-between; */
		/* align-items: center; */
		flex-wrap: wrap;
		/* background-color: bisque; */
	}
	.plcBox{
		width: 218rpx;
		height: 58rpx;
		background: #F6F7F8;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* padding-left: 25rpx; */
		/* padding-right: 17rpx; */
		margin-left: 5rpx;
		/* background-color: aquamarine; */
	}
	.plcBoxText{
		display: block;
		width: 100rpx;
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 溢出隐藏 */
		text-overflow: ellipsis; /* 溢出部分用省略号表示 */
	}
	
</style>
